<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title">{{ 'platform.version.service_restart_required' | translate }}</h5>
    <button
      type="button"
      class="btn-close"
      data-bs-dismiss="modal"
      [attr.aria-label]="'form.button_close' | translate"
      (click)="dismissModal()"
    ></button>
  </div>
  <div class="modal-body text-center">
    <i class="fas fa-power-off primary-text mb-3" style="font-size: 75px"></i>
    <p class="w-100">{{ 'restart.child_bridge_list' | translate }}</p>
    <div class="text-center">
      <ul class="list-group list-group-box mb-0 w-75 mx-auto">
        @for (bridge of bridges; track bridge) {
        <li class="list-group-item d-flex justify-content-between align-items-center">
          <span class="me-3">
            <i class="fas fa-hap"></i>
          </span>
          <span class="flex-grow-1 text-start">
            {{ bridge.name }}<br />
            <small class="grey-text font-monospace">{{ bridge.username }}</small>
          </span>
        </li>
        }
      </ul>
    </div>
  </div>
  <div class="modal-footer justify-content-between">
    <div class="text-start">
      <button
        type="button"
        class="btn btn-elegant"
        data-bs-dismiss="modal"
        (click)="dismissModal()"
        [attr.aria-label]="'form.button_close' | translate"
      >
        {{ 'form.button_close' | translate }}
      </button>
    </div>
    <div class="text-center"></div>
    <div class="text-end">
      <button type="button" class="btn btn-primary" (click)="onRestartChildBridgeClick()">
        {{ 'menu.tooltip_restart' | translate }}
      </button>
    </div>
  </div>
</div>
